<!--
 * @Author: your name
 * @Date: 2021-07-24 00:07:19
 * @LastEditTime: 2021-07-25 01:05:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hairdressing_web\src\pages\qianbao\index.vue
-->
<template>
  <view>
    <image src="/static/icon/fanhui.png" mode="" class="fanhui" @click="fan" />
    <view class="bg">
      <view class="qian">
        <view class="yu">￥{{ balance }}</view>
        <view class="d">您的当前可提现余额</view>
        <button @click="tixian">提现</button>
      </view>
    </view>
    <view>
      <view class="c-fw600 p15">提现记录</view>
      <view v-if="list.length > 0">
        <view v-for="item in list" :key="item.id" class="clear item">
          <view class="fl">
            <image :src="item.user.avatar" />
          </view>
          <view class="fl name">
            <view>{{ item.user.username }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <view class="fr price" :class="item.type == 1 ? 'show' : 'zhi'">
            {{ item.type == 1 ? '+' : '-' }}￥{{ item.money }}
          </view>
        </view>
      </view>
      <u-empty text="提现记录为空" mode="list" v-else></u-empty>
    </view>
  </view>
</template>
<script>
  import qianbao from '@/services/qianbao'
  export default {
    data() {
      return {
        list: [],
        balance: 0,
        page: 1,
        limit: 10
      }
    },
    mounted() {
      this.getList()
      this.getInfo()
    },
    onReachBottom() {
      this.page++
      this.getList()
    },
    methods: {
      fan() {
        uni.navigateBack({
          delta: 1
        })
      },
      tixian() {
        qianbao.tixian().then(data => {
          wx.showToast({
            title: '提现申请已提交',
            duration: 5000
          })
          this.getInfo()
          this.list = []
          this.page = 1
          this.getList()
        })
      },
      getList() {
        qianbao
          .list({
            page: this.page,
            limit: this.limit
          })
          .then(data => {
            this.list.push(...data.list)
          })
      },
      getInfo() {
        qianbao
          .info({
            userId: uni.getStorageSync('userId')
          })
          .then(data => {
            if (data) {
              this.balance = data.balance
            } else {
              this.balance = 0
            }
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .fanhui {
    position: absolute;
    top: 100rpx;
    left: 30rpx;
    width: 40rpx;
    height: 40rpx;
  }
  u-empty /deep/ {
    .u-empty {
      margin-top: 40rpx !important;
    }
  }
  .bg {
    width: 100vw;
    height: 70vw;
    background: url('/static/image/tixian.png') 0 0 / 100% 100%;
    button {
      border: 1px solid #fff;
      width: 220rpx;
      height: 70rpx;
      line-height: 70rpx;
      color: #fff;
      border-radius: 80px;
      font-size: 15px;
      background: none;
      margin-top: 20px;
    }
  }
  .p15 {
    padding: 0 30rpx;
  }
  .time {
    font-size: 13px;
    color: #bebebe;
    margin-top: 5px;
  }
  .shou {
    color: #00b486;
  }
  .zhi {
    color: #ff3737;
  }
  .name {
    margin-left: 11px;
    margin-top: 6px;
  }
  .price {
    line-height: 50px;
    font-weight: 600;
  }
  .item {
    padding: 50rpx 30rpx;
    border-bottom: 1px solid #e9e9e9;
    image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .qian {
    text-align: center;
    padding-top: 20vw;
    color: #fff;
  }
  .d {
    margin-top: 10px;
    font-size: 16px;
  }
  .yu {
    font-size: 30px;
    font-weight: 600;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clear::after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
  }
</style>
